<template>
    <a-tag :class='$style.c' :color='color'>
        <template #icon>
            <template v-if='status == 1'>
                <ClockCircleOutlined />
            </template>
            <template v-if='status == 2'>
                <SyncOutlined spin />
            </template>
            <template v-if='status == 3'>
                <CheckCircleOutlined />
            </template>
            <template v-if='status == 4'>
                <CloseCircleOutlined />
            </template>
        </template>
        {{BACKTEST_STATUS[status]}}
    </a-tag>
</template>

<script lang='ts' setup>
    import {
    CheckCircleOutlined,
    SyncOutlined,
    CloseCircleOutlined,
    ClockCircleOutlined,
    } from '@ant-design/icons-vue';
    import { BACKTEST_STATUS } from '@/constant'
import { computed } from 'vue';
    const props = defineProps<{
        status : number
    }>()

    const color = computed(() => {
        let color
        switch (props.status) {
            case 1:
                color = 'default'
                break;
            case 2:
                color = 'processing'
                break;
            case 3:
                color = 'success'
                break;
            case 4:
                color = 'error'
                break;
        }

        return color
    })
</script>

<style lang='scss' module>
    .c{
        > :global(.anticon + span) {
            margin-left: 0 !important;
        }
    }
</style>